<template>
  <div>
    <van-nav-bar fixed title="会员详情" left-arrow @click-left="$utils.back($route.path);" />
    <div class="has-top">
      <div class="head-bg-box bg-primary pos-a" />
      <!-- 背景 -->

      <div class="page-content-box mlr-25">
        <personHead :head-value="headValue" />

        <record-list
          :list="recordList"
          :total="total"
          img-size="60"
          type="memberCash"
          @openDetail="openDetail"
        />
        <no-data v-if="recordList.length === 0" />
        <p v-if="end===true&&recordList.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
        <!-- 列表 -->
        <!-- 收银记录列表 -->
      </div>
    </div>
  </div>
</template>

<script>
import recordList from 'components/recordList'
import personHead from 'components/personHead'
import noData from 'components/noData'
import { GetStoreMemberAccount } from 'api/store'
import { GetCashierTotal, GetCashierPage } from 'api/order'
import utils from 'utils/utils'
export default {
  components: {
    personHead,
    recordList,
    noData
  },
  data() {
    return {
      // 头部数据
      UserId: '',
      headValue: {},
      GetCashierTotalRequest: {},
      GetCashierPageRequest: {
        PageIndex: 1,
        PageSize: 10
      },

      total: {
        TotalSale: 0,
        OrderCount: 0
      },
      // 收银记录列表
      recordList: [],

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      end: false
    }
  },
  created() {
    this.UserId = this.$route.params.id
    this.GetCashierPageRequest.UserId = this.UserId
    this.GetCashierTotalRequest.UserId = this.UserId
    this.GetStoreMemberAccount()
    this.GetCashierTotal()
    this.GetCashierPage()
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    GetStoreMemberAccount() {
      const _this = this
      GetStoreMemberAccount({ UserId: _this.UserId }).then(res => {
        if (res) {
          const gradeInfo = {}
          _this.headValue = res.Data
        }
      })
    },
    GetCashierTotal() {
      const _this = this
      GetCashierTotal(_this.GetCashierTotalRequest).then(res => {
        const RES = res.Data
        console.log(res)
        if (RES) {
          _this.total.OrderCount = RES.OrderCount || 0
          _this.total.TotalSale = RES.TotalSale || 0
          _this.PayWayTotalList = RES.PayWayTotalList
        }
      })
    },
    GetCashierPage() {
      const _this = this
      GetCashierPage(_this.GetCashierPageRequest).then(res => {
        if (res) {
          if (res.Data.length && res.Data.length > 0) {
            res.Data.forEach(tem => {
              tem.Id = tem.ID
              _this.recordList.push(tem)
            })
          }
          console.log('1231:' + res.TotalAmout)
          _this.totalAmout = res.TotalAmout
          _this.scollRequest = true
        }
      })
    },
    openDetail(id) {
      console.log(id)
      this.$router.push('/storeManage/cashDetail/' + id)
    },
    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (utils.getScrollHeight() - utils.getClientHeight() - utils.getScrollTop() <= 5) {
          _this.scollRequest = false
          // alert('触发！！！')

          if (_this.GetCashierPageRequest.PageIndex < _this.totalAmout) {
            _this.GetCashierPageRequest.PageIndex++
            _this.GetCashierPage()
          } else {
            _this.end = true
          }
          // }
        }
      }
    }
  }
}
</script>
